<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>我的组件库</title>
		<meta name="description" content="简单实用的jQuery插件库，包含轮播（幻灯片）、标签页、弹出框、滚动条、城市三级联动等组件，极大地方便了前端开发">
		<meta name="keywords" content="jQuery插件,javascript,前端开发,轮播,组件">
		<meta name="author" content="木木阳,mumuy,passerby" />
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			header{
				height: 210px;
				padding: 80px 0 20px;
				color: #fff;
				margin-bottom: 50px;
			}
			.bg{
				position: absolute;
				width: 100%;
				height: 740px;
				top: 0px;
				left: 0px;
				z-index: -1;
				background: radial-gradient(95.74% 95.74% at 50% 116.49%, rgba(85, 144, 255, 0.15) 0%, rgba(85, 144, 255, 0) 100%), rgb(255, 255, 255);
				transform: rotate(-180deg);
			}
			.inner{
				width:960px;
				margin:0 auto;
			}
			footer{
				position: absolute;
			    bottom: 0;
			    width: 100%;
			    height: 40px;
			    line-height: 40px;
			    z-index: 99;
			}
			.clearfix:after {
				display:block;
				content:".";
				height:0;
				visibility:hidden;
				clear:both;
			}
			.clearfix {
				zoom:1;
			}

			.mod-head{
				margin-bottom: 35px;
				line-height: 1.2;
				text-align: center;
			}
			.mod-head h1{
				font-weight: bold;
				line-height: 60px;
				font-size: 45px;
				color: #1a2b3b;
			}
			.mod-head p{
				line-height: 30px;
				font-size: 18px;
				color: #1a2b3b;
			}
			.mod-list{
				margin-bottom: 15px;
				text-align: center;
			}
			.mod-list li{
				display: inline-block;
				margin:0 5px;
			}
			.mod-list .btn{
				display: block;
				padding: 0 15px;
			    height: 36px;
			    background: rgba(255,255,255,0.8);
			    border: 1px solid rgba(0,0,0,0.05);
			    line-height: 36px;
				font-size: 15px;
			    color: #666;
			    border-radius: 6px;
			    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
			}
			.mod-list .btn:hover{
				background-color: rgba(255,255,255,1);
			}
			.mod-botton{
				width: 960px;
				height: 32px;
				margin: 0 auto 15px;
				text-align: center;
			}
			.mod-content{
				width:840px;
				margin:0 10px 0 auto;
			}
			.mod-content li{
				float: left;
				width: 50%;
				line-height: 20px;
			}
			.mod-content .item{
				padding: 10px 15px;
				background: #fff;
				border: 1px solid #fefefe;
				margin: 0 4px 8px;
				border-radius: 5px;
				cursor: pointer;
				box-shadow: 0 2px 8px rgba(0,0,0,0.06);
				color: #888;
			}
			.mod-content .item:hover{
				background: #fafafa;
				border: 1px solid #fdfdfd;
			}
			.mod-content a{
				font-weight: bold;
				color: #444;
			}
			.mod-content a.hot{
				color: #cc0000;
			}
			.mod-content a:hover{
				border-bottom: 1px dotted #666;
			}
			.mod-foot{
				text-align: center;
				padding:0 30px;
				color:#999;
			}
			.mod-foot a{
				color:#999;
			}

			::selection {
			    background-color: rgba(255,255,255,0.1);
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="bg"></div>
			<header>
				<div class="mod-head">
					<div class="inner">
						<h1>我的Web组件库</h1>
						<p>让前端开发快到飞起来～</p>
					</div>
				</div>
				<div class="mod-list">
					<div class="inner">
						<ul>
							<li><a class="btn" href="https://passer-by.com/" target="_blank">个人网站</a></li>
							<li><a class="btn" href="https://github.com/mumuy/widget" target="_blank">查看GitHub</a></li>
							<li><a class="btn" href="https://github.com/mumuy/widget/zipball/master" target="_blank">下载 .zip</a></li>
						</ul>
					</div>
				</div>
				<div class="mod-botton">
					<div class="inner">
						<a class="github-button" href="https://github.com/mumuy" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" aria-label="Follow @mumuy on GitHub">Follow @mumuy</a>
						<a class="github-button" href="https://github.com/mumuy/widget" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star mumuy/widget on GitHub">Star</a>
					</div>
				</div>
			</header>
			<div class="container">
				<div class="inner">
					<div class="mod-content">
						<ul class="clearfix">
							<li>
								<div class="item">
									<p>
										<a class="hot" href="/jquery-slider/" target="_blank">轮播</a>
										<span>/</span>
										<a href="/jquery-slider/subject.html" target="_blank">全屏轮播</a>
									<p>
									<p>$(selector).slider(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-tabs/" target="_blank">标签页</a></p>
									<p>$(selector).tabs(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-scrollbar/" target="_blank">滚动条</a></p>
									<p>$(selector).scrollbar(options,callback(api));</p>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-select/" target="_blank">下拉框</a></p>
									<p>$(selector).select(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-range/" target="_blank">滑动条</a></p>
									<p>$(selector).range(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-dialog/" target="_blank">对话框</a></p>
									<p>$(selector).dialog(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-countdown/" target="_blank">倒计时</a></p>
									<p>$(selector).countdown(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-imagezoom/" target="_blank">图片聚焦</a></p>
									<p>$(selector).imagezoom(options);</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-headroom/" target="_blank">浮动菜单</a></p>
									<p>$(selector).headroom(options);</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p>
										<a href="/jquery-calendar/" target="_blank">日历</a>
										<span>/</span>
										<a href="/jquery-calendar/slider.html" target="_blank">滑动日历(基于轮播)</a>
									</p>
									<p>$(selector).calendar(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-popup/" target="_blank">弹出层</a></p>
									<p>$(selector).popup(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-suggestion/" target="_blank">搜索建议</a></p>
									<p>$(selector).suggestion(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-citys/" target="_blank">城市三级联动</a></p>
									<p>$(selector).citys(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-tablesort/" target="_blank">表格排序</a></p>
									<p>$(selector).tablesort(options);</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-tablefixed/" target="_blank">表格浮动表头</a></p>
									<p>$(selector).tablefixed(options);</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-tableselect/" target="_blank">表格单元格操作</a></p>
									<p>$(selector).tableselect(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-inputFormat/" target="_blank">格式化输入框</a></p>
									<p>$(selector).inputFormat(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-accordion/" target="_blank">手风琴</a></p>
									<p>$(selector).accordion(options,callback(api));</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-colorpicker/" target="_blank">颜色选择器</a></p>
									<p>$(selector).colorpicker(options);</p>
								</div>
							</li>
							<li>
								<div class="item">
									<p><a href="/jquery-emoticons/" target="_blank">聊天表情</a></p>
									<p>$.emoticons(options,callback(api));</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<footer>
				<div class="mod-foot">
					<p>Copyright &copy; <span>jquerywidget.com</span></p>
				</div>
			</footer>
		</div>
		<script type="text/javascript">
			function stopDefault(e) {
				if ( e && e.preventDefault ){
					e.preventDefault();
				}else{
					window.event.returnValue = false;
				}
				return false;
			}
			var $list = document.querySelectorAll('.item');
			for(var i=0;i<$list.length;i++){
				$list[i].addEventListener('click',function(event) {
					if(event.target.tagName=='A'){
						return false;
					}
					var $link = this.getElementsByTagName('A');
					if($link.length){
						var url = $link[0].getAttribute('href');
						window.open(url);
						stopDefault(event);
					}
				});
			}
		</script>
		<script async defer src="https://buttons.github.io/buttons.js"></script>
		<script>
			var _hmt = _hmt || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "https://hm.baidu.com/hm.js?134d31aed1aec463afbaa9e0bec45001";
			  var s = document.getElementsByTagName("script")[0];
			  s.parentNode.insertBefore(hm, s);
			})();
		</script>
		<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
	</body>
</html>
